import { Component, OnInit, OnDestroy } from '@angular/core';
import { LocalStorage } from 'app/ptpmc/localstorage/local.storage';
import { CommService } from 'app/ptpmc/comm/comm.service';
import * as $ from 'jquery'
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-shop-selected',
  templateUrl: './plane.component.html',
  styleUrls: ['./plane.component.scss']
})
export class ShopSelctedComponent implements OnInit, OnDestroy {
  lunpan: any = {}
  countTimer: any;
  //ieTimer: any;
  //lgeProd = '';
  cssProd = '';
  gf9Prod = '';
  bev3Prod = '';
  css5Prod = '';
  gfeProd = '';
  hevProd = '';
  phevProd = '';
  ubevProd = '';

  //lgeProd1 = '';
  cssProd1 = '';
  gf9Prod1 = '';
  bev3Prod1 = '';
  css5Prod1 = '';
  gfeProd1 = '';
  hevProd1 = '';
  phevProd1 = '';
  ubevProd1 = '';

  isIE = true;
  loadData = true;
  constructor(private ls: LocalStorage, private commServices: CommService, private router: Router) { }

  loadProd() {
    // this.commServices.doGetUrl(`${this.commServices.K226Url}/prodCount/curr/K226`)
    //   .subscribe(model => {
    //     if (model.resultCode === 200) {
    //       this.lgeProd = model.data
    //       this.lgeProd1 = model.data
    //     }
    //   });
    this.commServices.doGetUrl(`${this.commServices.GF9Url}/prodCount/curr/GF9`)
      .subscribe(model => {
        if (model.resultCode === 200) {
          this.gf9Prod = model.data
          this.gf9Prod1 = model.data
        }
      });
    this.commServices.doGetUrl(`${this.commServices.CSSUrl}/prodCount/curr/CSS1`)
      .subscribe(model => {
        if (model.resultCode === 200) {
          this.cssProd = model.data
          this.cssProd1 = model.data
        }
      });
    // this.commServices.doGetUrl(`${this.commServices.B121Url}/prodCount/curr/B121`)
    //   .subscribe(model => {
    //     if (model.resultCode === 200) {
    //       this.b121Prod = model.data
    //       this.b121Prod1 = model.data
    //       debugger

    //         this.B121jph = model.data.jph
    //         this.B121hours = model.data.hours


    //     }
    //   });

    this.commServices.doGetUrl(`${this.commServices.BEV3Url}/prodCount/curr/BEV3`)
      .subscribe(model => {
        if (model.resultCode === 200) {
          this.bev3Prod = model.data
          this.bev3Prod1 = model.data
        }
      });
    this.commServices.doGetUrl(`${this.commServices.CSS5Url}/prodCount/curr/CSS5`)
      .subscribe(model => {
        if (model.resultCode === 200) {
          this.css5Prod = model.data
          this.css5Prod1 = model.data
        }
      });
    this.commServices.doGetUrl(`${this.commServices.GFEUrl}/prodCount/curr/GFE`)
      .subscribe(model => {
        if (model.resultCode === 200) {
          this.gfeProd = model.data
          this.gfeProd1 = model.data
        }
      });
    this.commServices.doGetUrl(`${this.commServices.HEVUrl}/prodCount/curr/HEV`)
      .subscribe(model => {
        if (model.resultCode === 200) {
          this.hevProd = model.data
          this.hevProd1 = model.data
        }
      });
    this.commServices.doGetUrl(`${this.commServices.PHEVUrl}/prodCount/curr/PHEV`)
      .subscribe(model => {
        if (model.resultCode === 200) {
          this.phevProd = model.data
          this.phevProd1 = model.data
        }
      });
    this.commServices.doGetUrl(`${this.commServices.UBEVUrl}/prodCount/curr/UBEV`)
      .subscribe(model => {
        if (model.resultCode === 200) {
          this.ubevProd = model.data
          this.ubevProd1 = model.data
        }
      });
  }

  ngOnInit() {
    if ('ActiveXObject' in window) {
      this.isIE = true;
    }
    else if (navigator.userAgent.indexOf("Edge") > -1) {
      this.isIE = true;
    }
    else {
      this.isIE = false;
    }


    this.loadProd();
    this.countTimer = setInterval(() => {
      if (this.commServices.lodingShopSelectedData = true) {
        console.log('时间到啦...刷新车间数据');
        this.loadProd();
        //debugger
      }
    }, 30000)

    // if (this.isIE) {
    //   this.loadProd();
    //    this.ieTimer = setInterval(() => {
    //      if(this.loadData){
    //       this.loadProd();
    //      }

    //   }, 10000);
    //   return;
    // }
    const positionArr = [
      {
        left: '-200px',
        bottom: '400px',
        opacity: 1
      },
      {
        left: '-450px',
        bottom: '100px',
        opacity: 0.7
      },
      {
        left: '-300px',
        bottom: '-200px',
        opacity: 0.3
      },
      {
        left: '-150px',
        bottom: '-400px',
        opacity: 0.3
      },
      {
        left: '150px',
        bottom: '-400px',
        opacity: 0.3
      },
      {
        left: '300px',
        bottom: '-200px',
        opacity: 0.3
      },
      {
        left: '450px',
        bottom: '100px',
        opacity: 0.7
      },
      {
        left: '200px',
        bottom: '400px',
        opacity: 1
      }
    ];
    this.lunpan = {
      that: this,
      panStatus: true, // 轮盘是否开启
      normalStep: 'step_1', // 默认步骤
      nextStep: 'step_2',
      prevStep: 'step_8',
      flagShow: false, // 卡片是否展示
      baseDeg: 90, // 初始化转角
      auto: false,
      canOp: false, // 防抖
      lineSpeedConfig: { // 轮盘图形配置
        pan1: {
          id: '#pan1',
          speed: 0,
          deg: 0,
          doRotate: false,
          rotate: 1,
          rotatesIndex: 0,
          canRotate: false,
          type: 'add',
          rotates: [
            0.1, 0.1, 0.1, 0.3, 0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.5, 0.5, 0.7, 0.7, 0.7, 0.7, 0, 7, 0.9, 0.9, 0.9,
            0.9, 0.9, 0.9, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.4, 1.4, 1.4, 1.4, 1.4, 1.7, 1.7, 1.7, 1.7, 1.7, 1.7,
            2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0,
            1.7, 1.7, 1.7, 1.7, 1.7, 1.7, 1.4, 1.4, 1.4, 1.4, 1.4, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 0.9, 0.9, 0.9,
            0.9, 0.9, 0.9, 0.7, 0.7, 0.7, 0.1, 0, 1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1
          ]
        },
        pan2: {
          id: '#pan2',
          speed: -0.5,
          deg: 0,
          doRotate: false,
          rotate: 0
        },
        pan3: {
          id: '#pan3',
          speed: -0.5,
          deg: 0,
          doRotate: true,
          rotate: 0
        },
        pan4: {
          id: '#pan4',
          speed: 0.5,
          deg: 0,
          doRotate: false,
          rotate: 0
        },
        pan5: {
          id: '#pan5',
          speed: 0,
          deg: 0,
          doRotate: false,
          rotate: 1.5
        },
        pan6: {
          id: '#pan6',
          speed: -1,
          deg: 0,
          doRotate: false,
          rotate: 0
        },
        pan7: {
          id: '#pan7',
          speed: 1,
          deg: 0,
          doRotate: true,
          rotate: 0
        }
      },
      stepsConfig: { // 轮盘转动配置
        //GF9
        step_1: {
          position1: positionArr[0],
          position2: positionArr[1],
          position3: positionArr[2],
          position4: positionArr[3],
          position5: positionArr[4],
          position6: positionArr[5],
          position7: positionArr[6],
          position8: positionArr[7],
          namePosition: {
            cardId: 'card1',
            name: 'GF9',
            title: 'GF9',
            data: '10,000万'
          }
        },
        //CSS1
        step_2: {
          position1: positionArr[7],
          position2: positionArr[0],
          position3: positionArr[1],
          position4: positionArr[2],
          position5: positionArr[3],
          position6: positionArr[4],
          position7: positionArr[5],
          position8: positionArr[6],
          namePosition: {
            cardId: 'card2',
            name: 'CSS P1',
            title: 'CSS P1',
            data: '10,000万'
          }
        },
        //CSS5
        step_3: {
          position1: positionArr[6],
          position2: positionArr[7],
          position3: positionArr[0],
          position4: positionArr[1],
          position5: positionArr[2],
          position6: positionArr[3],
          position7: positionArr[4],
          position8: positionArr[5],
          namePosition: {
            cardId: 'card3',
            name: 'CSS P5',
            title: 'CSS P5',
            data: '10,000万'
          }
        },
        //BEV3
        step_4: {
          position1: positionArr[5],
          position2: positionArr[6],
          position3: positionArr[7],
          position4: positionArr[0],
          position5: positionArr[1],
          position6: positionArr[2],
          position7: positionArr[3],
          position8: positionArr[4],
          namePosition: {
            cardId: 'card4',
            name: 'BEV3 RESS P1',
            title: 'BEV3 RESS P1',
            data: '10,000万'
          }
        },
        //NCXB
        step_5: {
          position1: positionArr[4],
          position2: positionArr[5],
          position3: positionArr[6],
          position4: positionArr[7],
          position5: positionArr[0],
          position6: positionArr[1],
          position7: positionArr[2],
          position8: positionArr[3],
          namePosition: {
            cardId: 'card5',
            name: 'NCXB',
            title: 'NCXB',
            data: '10,000万'
          }
        },
        //GFE2
        step_6: {
          position1: positionArr[3],
          position2: positionArr[4],
          position3: positionArr[5],
          position4: positionArr[6],
          position5: positionArr[7],
          position6: positionArr[0],
          position7: positionArr[1],
          position8: positionArr[2],
          namePosition: {
            cardId: 'card6',
            name: 'GFE2.0 BU',
            title: 'GFE2.0 BU',
            data: '10,000万'
          }
        },
        // PHEV
        step_7: {
          position1: positionArr[2],
          position2: positionArr[3],
          position3: positionArr[4],
          position4: positionArr[5],
          position5: positionArr[6],
          position6: positionArr[7],
          position7: positionArr[0],
          position8: positionArr[1],
          namePosition: {
            cardId: 'card7',
            name: 'U557 PHEV RESS',
            title: 'U557 PHEV RESS',
            data: '10,000万'
          }
        },
        // UBEV
        step_8: {
          position1: positionArr[1],
          position2: positionArr[2],
          position3: positionArr[3],
          position4: positionArr[4],
          position5: positionArr[5],
          position6: positionArr[6],
          position7: positionArr[7],
          position8: positionArr[0],
          namePosition: {
            cardId: 'card8',
            name: 'U557 BEV RESS',
            title: 'U557 BEV RESS',
            data: '10,000万'
          }
        }
      },
      // 自动播放配置
      autoPlayConfig: {
        intervalTime: 5000
      },
      // 防抖函数
      antiShake: function () {
        if (!this.canOp) {
          this.canOp = true
          return false
        } else {
          let me = this
          setTimeout(function () {
            me.canOp = false
          }, 200)
          return true
        }
      },
      // 初始化
      init: function (config) {
        console.log(config)
        let me = this
        let stepsConfig = me.stepsConfig
        for (let key in stepsConfig) {
          $('#' + stepsConfig[key]['namePosition']['cardId']).find('.card_title').text(stepsConfig[key]['namePosition'][
            'title'
          ])
          // $('#' + stepsConfig[key]['namePosition']['cardId']).find('.card_data').text(stepsConfig[key]['namePosition'][
          //   'data'
          // ])
        }
        me.calculationCardHeight()
        setInterval(function () {
          me.rotate()
        }, 10)

        if (!!config && config['autoPlay']) {
          if (!!config['intervalTime']) {
            me.autoPlayConfig['intervalTime'] = config['intervalTime']
          }
          me.doAutoPlay()
        }
      },
      // 渲染
      loadView: function (stepObj, show) {
        this.loadBaseLine()
        let stepsConfig = this.stepsConfig
        let normalStep = this.normalStep
        if (!!stepObj) {

        } else {
          stepObj = stepsConfig[normalStep]
        }
        if (normalStep == 'step_1') {
          this.nextStep = 'step_2'
          this.prevStep = 'step_8'
        } else if (normalStep == 'step_2') {
          this.nextStep = 'step_3'
          this.prevStep = 'step_1'
        } else if (normalStep == 'step_3') {
          this.nextStep = 'step_4'
          this.prevStep = 'step_2'
        } else if (normalStep == 'step_4') {
          this.nextStep = 'step_5'
          this.prevStep = 'step_3'
        } else if (normalStep == 'step_5') {
          this.nextStep = 'step_6'
          this.prevStep = 'step_4'
        } else if (normalStep == 'step_6') {
          this.nextStep = 'step_7'
          this.prevStep = 'step_5'
        } else if (normalStep == 'step_7') {
          this.nextStep = 'step_8'
          this.prevStep = 'step_6'
        } else if (normalStep == 'step_8') {
          this.nextStep = 'step_1'
          this.prevStep = 'step_7'
        }
        let opacity1 = stepObj['position1']['opacity'],
          opacity2 = stepObj['position2']['opacity'],
          opacity3 = stepObj['position3']['opacity'],
          opacity4 = stepObj['position4']['opacity'],
          opacity5 = stepObj['position5']['opacity'],
          opacity6 = stepObj['position6']['opacity'],
          opacity7 = stepObj['position7']['opacity'],
          opacity8 = stepObj['position8']['opacity']

        if (!show) {
          opacity1 = 0
          opacity2 = 0
          opacity3 = 0
          opacity4 = 0
          opacity5 = 0
          opacity6 = 0
          opacity7 = 0
          opacity8 = 0
        } else {
          $('.flag_line').show()
          $('.step_name_box').text(stepsConfig[normalStep]['namePosition']['name'])
        }

        $('.flag1').css({
          left: stepObj['position1']['left'],
          bottom: stepObj['position1']['bottom'],
          opacity: opacity1
        })
        $('.flag2').css({
          left: stepObj['position2']['left'],
          bottom: stepObj['position2']['bottom'],
          opacity: opacity2
        })
        $('.flag3').css({
          left: stepObj['position3']['left'],
          bottom: stepObj['position3']['bottom'],
          opacity: opacity3
        })
        $('.flag4').css({
          left: stepObj['position4']['left'],
          bottom: stepObj['position4']['bottom'],
          opacity: opacity4
        })
        $('.flag5').css({
          left: stepObj['position5']['left'],
          bottom: stepObj['position5']['bottom'],
          opacity: opacity5
        })
        $('.flag6').css({
          left: stepObj['position6']['left'],
          bottom: stepObj['position6']['bottom'],
          opacity: opacity6
        })
        $('.flag7').css({
          left: stepObj['position7']['left'],
          bottom: stepObj['position7']['bottom'],
          opacity: opacity7
        })
        $('.flag8').css({
          left: stepObj['position8']['left'],
          bottom: stepObj['position8']['bottom'],
          opacity: opacity8
        })
      },
      // 根据操作来计算旋转方向
      handlerPanStatusChange: function (type, time) {
        let lineSpeedConfig = this.lineSpeedConfig
        for (let key in lineSpeedConfig) {
          if (!lineSpeedConfig[key]['doRotate'] && lineSpeedConfig[key]['rotate'] > 0) {
            if (!!lineSpeedConfig[key]['rotates']) {
              lineSpeedConfig[key]['type'] = type
            } else {
              if (type === 'add') {
                lineSpeedConfig[key]['speed'] = lineSpeedConfig[key]['rotate']
              } else {
                lineSpeedConfig[key]['speed'] = -lineSpeedConfig[key]['rotate']
              }
            }

          }
        }
        setTimeout(function () {
          for (let key in lineSpeedConfig) {
            if (!lineSpeedConfig[key]['doRotate'] && lineSpeedConfig[key]['rotate'] > 0) {
              lineSpeedConfig[key]['speed'] = 0
            }
          }
        }, time)
      },
      // 轮盘旋转
      rotate: function () {
        let lineSpeedConfig = this.lineSpeedConfig
        for (let key in lineSpeedConfig) {
          if (!!lineSpeedConfig[key]['rotates']) {
            if (lineSpeedConfig[key]['canRotate']) {
              if (lineSpeedConfig[key]['type'] == 'add') {
                lineSpeedConfig[key]['deg'] += lineSpeedConfig[key]['rotates'][lineSpeedConfig[key]['rotatesIndex']]
              } else {
                lineSpeedConfig[key]['deg'] -= lineSpeedConfig[key]['rotates'][lineSpeedConfig[key]['rotatesIndex']]
              }
              lineSpeedConfig[key]['rotatesIndex']++
              if (lineSpeedConfig[key]['rotatesIndex'] >= 100) {
                this.closeOrOpenRotate('close')
                lineSpeedConfig[key]['rotatesIndex'] = 0
              }
            }
          } else {
            lineSpeedConfig[key]['deg'] += lineSpeedConfig[key]['speed']
          }

          if (lineSpeedConfig[key]['deg'] >= 360 || lineSpeedConfig[key]['deg'] <= -360) {
            lineSpeedConfig[key]['deg'] = 0
          }
          $(lineSpeedConfig[key]['id']).css({
            transform: 'rotateZ(' + lineSpeedConfig[key]['deg'] + 'deg)'
          })
          // }
        }

      },
      // 轮盘连线
      loadBaseLine: function () {
        let baseDeg = this.baseDeg
        $('.flag_line_box').css({
          transform: 'rotateZ(' + baseDeg + 'deg)'
        })
      },
      // 操作
      doChange: function (op, step) {
        let me = this
        me.auto = true
        if (!me.antiShake() && me.antiShake() != undefined) {
          if (me.flagShow) {
            let stepObj
            me.closeOrOpenRotate('open')
            if (op == 'next') {
              me.baseDeg += 90
              stepObj = me.stepsConfig[me.nextStep]
              me.normalStep = me.nextStep
              me.handlerPanStatusChange('add', 1000)
            } else {
              me.baseDeg -= 90
              stepObj = me.stepsConfig[me.prevStep]
              me.normalStep = me.prevStep
              me.handlerPanStatusChange('reduce', 1000)
            }
            me.loadView(null, true)
          }
        }
      },
      closeOrOpenRotate: function (type) {
        let me = this
        let lineSpeedConfig = this.lineSpeedConfig
        for (let key in lineSpeedConfig) {
          if (!!lineSpeedConfig[key]['rotates']) {
            if (type === 'open') {
              lineSpeedConfig[key]['canRotate'] = true
            } else {
              lineSpeedConfig[key]['canRotate'] = false
            }

          }
        }
      },
      // 计算卡片最高的高度
      calculationCardHeight: function () {
        let arr = [$('.flag1')[0].offsetHeight, $('.flag2')[0].offsetHeight, $('.flag3')[0].offsetHeight, $('.flag4')[0]
          .offsetHeight, $('.flag5')[0].offsetHeight, $('.flag6')[0].offsetHeight, $('.flag7')[0].offsetHeight, $('.flag8')[0].offsetHeight
        ]
        let max = Math.max.apply(null, arr)
        let a: any = document.getElementsByClassName('flag')
        for (let i = 0; i < a.length; i++) {
          a[i].style.height = max + 'px'
        }
      },
      // 开始
      panStart: function () {
        let me = this
        if (!me.flagShow) {
          me.flagShow = true
          me.baseDeg = 90
          me.loadBaseLine()
          me.closeOrOpenRotate('open')
          $('#lunpan_box').css({
            transform: 'rotateX(-0deg)rotateY(0deg)rotateZ(0deg)translateX(0px)translateY(0px)translateZ(0px)'
          })
          me.handlerPanStatusChange('add', 1200)
          setTimeout(function () {
            me.loadView(null, true)
          }, 1000)
        }
      },
      // 结束
      panEnd: function () {
        let me = this
        if (me.flagShow) {
          me.flagShow = false
          $('.flag').css({
            opacity: 0
          })
          $('#lunpan_box').css({
            transform: 'rotateX(-60deg)rotateY(0deg)rotateZ(20deg)translateX(100px)translateY(100px)translateZ(-100px)'
          })
          $('.flag_line').hide()
          this.$('.step_name_box').text('')
          setTimeout(function () {
            me.normalStep = 'step_1'
            me.nextStep = 'step_2'
            me.prevStep = 'step_8'
            me.loadView(null, false)
          }, 1500)
        }
      },

      showStep: function (stepName) {
        // if (stepName === this.normalStep) {
        var shop = 'GF9';
        if (stepName == 'step_1') {
          shop = 'GF9';
        } else if (stepName == 'step_2') {
          shop = 'CSS1';
        } else if (stepName == 'step_3') {
          shop = 'CSS5';
        } else if (stepName == 'step_4') {
          shop = 'BEV3';
        } else if (stepName == 'step_5') {
          shop = 'NCXB';
        } else if (stepName == 'step_7') {
          shop = 'PHEV';
        } else if (stepName == 'step_8') {
          shop = 'UBEV';
        } else {
          shop = 'GFE2';
        }
        this.that.toShop(shop);
        // } else if (stepName === this.nextStep) {
        //   this.doChange('next')
        // } else if (stepName === this.prevStep) {
        //   this.doChange('prev')
        // } else {
        //   let me = this
        //   me.doChange('next')
        //   setTimeout(() => {
        //     me.doChange('next')
        //   }, 400)
        // }
      },
      opPan: function () {
        this.auto = true
        if (!this.antiShake()) {
          if (this.panStatus) {
            this.panStart()
            this.panStatus = false
          } else {
            this.panEnd()
            this.panStatus = true
          }
        }


      },
      outOpPan: function () {
        if (!this.auto) {
          this.opPan()
        } else {
          this.auto = false
        }
      },
      outDoChange: function () {
        if (!this.auto) {
          this.doChange('next')
        } else {
          this.auto = false
        }
      },
      doAutoPlay: function () {
        let me = this
        setInterval(function () {
          if (me.panStatus) {
            me.outOpPan()
          } else {
            me.outDoChange()
          }
        }, me['autoPlayConfig']['intervalTime'])
      },
    }
    this.lunpan.init({
      autoPlay: true,
      intervalTime: 3000
    })
  }
  // ngOnInit(): void {

  // }
  toDashboard() {

    this.router.navigate(['all-plane'])

  }

  toShop(shop) {
    clearInterval(this.countTimer);
    this.commServices.changeShop(shop);
    this.router.navigate(['ptpmc', 'home']);

  }

  centerPan() {
    var shop = this.lunpan.stepsConfig[this.lunpan.normalStep]['namePosition']['name'].split('车')[0];
    this.toShop(shop);
  }

  ngOnDestroy(): void {
    clearInterval(this.countTimer);
    //clearInterval(this.ieTimer);
  }


}
